@use "../mixins/_eui";
$sideBarSize: 60px;

:root {
  --base: 16px;
  //2px
  --size-xxs: calc(var(--base) * 0.125);
  //4px
  --size-xs: calc(var(--base) * 0.25);
  //8px
  --size-s: calc(var(--base) * 0.5);
  //12px
  --size-m: calc(var(--base) * 0.75);
  //16px
  --size-base: var(--base);
  //24px
  --size-l: calc(var(--base) * 1.5);
  //32px
  --size-xl: calc(var(--base) * 2);
  //40px
  --size-xxl: calc(var(--base) * 2.5);
  //48px
  --size-xxxl: calc(var(--base) * 3);
  //64px
  --size-xxxxl: calc(var(--base) * 4);

  // to 574px
  --bp-xs: 0;
  // to 767px
  --bp-s: 575px;
  // to 991px
  --bp-m: 768px;
  // to 1199px
  --bp-l: 992px;
  // above 1200px
  --bp-xl: 1200px;
}

html {
  letter-spacing: normal !important;
  background-color: var(--euiPageBackgroundColor);
  color: var(--htmlColor);
  // sass-lint:disable-block no-misspelled-properties
  scrollbar-width: thin;

  scrollbar-color: var(--scrollBackgroundColor) transparent;
}

body {
  @include eui.scrollBar;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: border-box;
}

.euiPage.main {
  color: var(--htmlColor);
}

.euiPage .euiPage {
  padding-bottom: 0;
}

.euiPage {
  background-color: var(--euiPageBackgroundColor) !important;
}

main.euiPageBody {
  height: calc(100vh - 60px);
  @media only screen and (min-width: 768px) {
    height: 100vh;
  }
}

.euiPageSideBar {
  margin-right: 0 !important;
  width: $sideBarSize;
  min-width: $sideBarSize !important;
  overflow: hidden !important;
  height: $sideBarSize !important;
  max-height: $sideBarSize !important;
  min-height: $sideBarSize !important;
  padding: 0;
  flex: 1 1 $sideBarSize !important;

  @media only screen and (min-width: 768px) {
    display: block;
    height: 100% !important;
    max-height: 100% !important;
    flex: 0 1 0 !important;
    overflow: auto !important;
  }
}

.euiLoadingSpinner {
  border-top-color: transparent;
}

.link-underline {
  color: currentColor;
  text-decoration: underline;

  &:hover {
    text-decoration: none;
  }
}

.color-shade {
  color: var(--textColorShade) !important;
}

.euiHealth .euiIcon {
  width: 18px !important;
  height: 18px !important;
}

.euiSpacer--m {
  height: 12px !important;
}

.euiSpacer--xl {
  height: 36px !important;
}

.euiProgress {
  background-color: var(--euiColorLightShade);
}
.euiProgress--primary.euiProgress--indeterminate:before,
.euiProgress--success.euiProgress--indeterminate:before {
  background-color: var(--euiColorPrimary);
}

.euiLoadingContent__singleLineBackground {
  background: linear-gradient(
    137deg,
    var(--loadingContentColor) 45%,
    var(--euiColorLightestShade) 50%,
    var(--loadingContentColor) 55%
  );
}

.euiListGroupItem--subdued .euiListGroupItem__text:not(:disabled),
.euiListGroupItem--subdued .euiListGroupItem__button:not(:disabled) {
  color: var(--euiTextSubduedColor);
}

.euiText pre {
  color: var(--euiTextColor);
}

// overrides
:root {
  // todo: take from theme
  --backgroundPrimaryHover: var(--euiPageBackgroundColor);
  --color-primary: #e8f1ff;
  --color-primary-text: #006bb4;
  --color-ghost-text: #fff;
  --color-text-text: #343741;
  --color-ghost: rgba(255, 255, 255, 0.1);
  --color-subdued: #e8f1ff;
  --background-hover: rgba(23 80 186 / 0.04);
  --background-primary-hover: rgba(23 80 186 / 0.04);
  --border-radius-small: 4px;
  --border-radius-medium: 6px;
  --font-weight-m: 500;
  --font-size-xs: 12px;
  --font-size-s: 14px;
  --font-size-m: 16px;
  --font-size-l: 18px;
  --gap-s: var(--size-s);
  --gap-m: var(--size-m);
}
